<template>
	<div ref="fullscreenDiv" class="board">
		<div class="title">
			<div class="left-opt"><a-button class="theme-btn" @click="leftShow = !leftShow">{{ leftShow?'收起': '展开' }}</a-button></div>
			<div class="full-screen">
				<span class="time-filter">
					<a-radio-group v-model:value="search.timeType" class="theme-radio" size="small" option-type="button" button-style="solid" :options="timeOptions" @change="changeTimeType(search.timeType)" />&nbsp;
					<a-range-picker v-show="search.timeType === 7" v-model:value="search.date_range" class="theme-input" size="small" allow-clear value-format="YYYY-MM-DD" />
				</span>
				<a-button class="theme-btn" @click="fullScreen">全屏</a-button>
			</div>
			{{ chooseProject?.projectName || chooseCompany?.companyName }}数据看板
		</div>
		<div class="flex">
			<div v-show="leftShow" class="left-list format-scrollbar">
				<div class="left-list-search">
					<a-input v-model:value="searchProject" class="theme-input" placeholder="项目查询" allow-clear>
						<template #prefix>
							<search-outlined />
						</template>
					</a-input>
				</div>
				<a-card>
					<a-card-grid class="text-center cursor-pointer" :class="{'choose': !chooseProject && !chooseCompany}" style="width: 100%; line-height: 40px; padding:0;" @click="toChooseAllCompany()">全部公司</a-card-grid>
				</a-card>
				<a-collapse v-if="innerCompanyList.length" v-model:activeKey="activeKey" accordion>
					<a-collapse-panel v-for="(item) in innerCompanyList" :key="item.companyId" :header="item.companyName" :class="{'choose-company': parseInt(activeKey) === item.companyId, choose: parseInt(activeKey) === item.companyId && !(chooseProject?.projectId)}">
						<a-card>
							<a-card-grid v-for="(i) in item.projects" :key="i.projectId" class="text-center cursor-pointer" :class="{'choose': chooseProject?.projectId === i.projectId}" style="width: 100%; line-height: 40px; padding:0;" @click="toChooseProject(i)">{{ i.projectName }}</a-card-grid>
						</a-card>
					</a-collapse-panel>
				</a-collapse>
				<a-empty v-else style="color: white;" :image="simpleImage" />
			</div>
			<div class="border-main flex">
				<div class="statistics flex">
					<div class="t-statistics flex">
						<div class="tl-statistics flex">
							<div class="tl-t-statistics">
								<div class="title ant-layout-content">
									合同统计
									<a-button type="link" class="position-absolute" size="small" style="right: 10px;top: 3px;" @click="router.push('/contract')">查看详情</a-button>
								</div>
								<div id="contractStatistics" search style="height: calc(100% - 30px); overflow: hidden"></div>
								<a-empty v-else-show style="color: white;" :image="simpleImage" />
							</div>
							<div class="tl-b-statistics flex-auto">
								<div class="title ant-layout-content">
									计划、验收及出库统计
									<a-select v-model:value="dailyType" class="theme-select" size="small" :options="dailyTypeOpts" option-filter-prop="label" style="position: absolute;right: 5px;top: 3px;" @change="changeDailyType"></a-select>
								</div>
								<div id="dailyStatistics" style="height: calc(100% - 25px); overflow: hidden"></div>
							</div>
						</div>
						<div class="tr-statistics flex-auto">
							<div class="title">成本概况</div>
							<a-empty style="color: white;" :image="simpleImage" :description="null">待确认</a-empty>
						</div>
					</div>
					<div class="b-statistics flex flex-auto">
						<div class="bl-statistics flex">
							<div class="bl-statistics-title">
								<div class="title">
									物资申请计划
									<div class="ant-layout-content">
										<a-button type="link" class="position-absolute" size="small" style="right: 10px;top: -21px;" @click="router.push('/purchase')">查看详情</a-button>
									</div>
								</div>
								<!--                <a-table size="small" :columns="applyColumns" :data-source="applyList" :scroll="{ y: 200 }" :pagination="false"></a-table>-->
								<a-row>
									<template v-for="(item, index) of applyColumns" :key="index">
										<a-col v-if="item.dataIndex === 'date'" :span="4" class="table-title" :style="index !== 0 ?'border-left: 0px': ''">{{ item.title }}</a-col>
										<a-col v-else :span="5" class="table-title" :style="index !== 0 ?'border-left: 0px': ''">{{ item.title }}</a-col>
									</template>
								</a-row>
							</div>
							<div class="table-body flex-auto" :style="`${applyList.length? 'animation: scroll '+ applyList.length * 1.5+'s linear infinite': ''}`">
								<template v-if="applyList.length">
									<a-row v-for="(item, index) of applyList" :key="index">
										<template v-for="(column, i) of applyColumns" :key="i">
											<a-col v-if="column.dataIndex === 'date'" class="li" :span="4">{{ item[column.dataIndex] }}</a-col>
											<a-col v-else data-content="完整内容" class="li" :span="5">{{ item[column.dataIndex] }}</a-col>
										</template>
									</a-row>
								</template>
								<template v-else>
									<a-empty v-else-show style="color: white;" :image="simpleImage" />
								</template>
							</div>
						</div>
						<div class="br-statistics">
							<div class="title ant-layout-content">
								指标对比
								<a-select v-model:value="indicator" class="theme-select" size="small" :options="indicatorOpts" option-filter-prop="label" style="position: absolute;right: 5px;top: 3px;" @change="changeIndicator"></a-select>
							</div>
							<div id="indicatorStatistics" search style="height: calc(100% - 30px); overflow: hidden"></div>
							<a-empty v-else-show style="color: white;" :image="simpleImage" />
						</div>
					</div>
				</div>
				<div class="settle">
					<div class="title ant-layout-content">
						开累结算统计
						<a-select v-if="supplierSettleStatistics.length > settleSize" v-model:value="settlePage" size="small" :options="settlePageOpts" option-filter-prop="label" style="position: absolute;right: 5px;top: 3px;" @change="changeSettlePage"></a-select>
					</div>
					<div class="t-settle">
						<div id="supplierSettleAmountStatistics"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, computed } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { Pie, Line, Bar, Column, measureTextWidth, G2 } from "@antv/g2plot";
import { post } from "../utils";
import { useRouter } from "vue-router";
import { Empty } from "ant-design-vue";
import { add, subtract } from "../utils/operation.js";
import dayjs from "dayjs";

const timeOptions = [
	{ label: '本月', value: 1 },
	{ label: '上月', value: 2 },
	{ label: '本季度', value: 3 },
	{ label: '上季度', value: 4 },
	{ label: '本年', value: 5 },
	{ label: '上年', value: 6 },
	{ label: '自定义', value: 7 },
]
const search = ref({
	timeType: -1,
	date_range: [],
})
const projectList = ref([]);
const companyList = ref([]);
const companyTreeList = ref([]);
const searchProject = ref(null);
const chooseCompany = ref(null);
const chooseProject = ref(null);
const pieChart = ref(null);
const lineChart = ref(null);
const barChart = ref(null);
const columnChart = ref(null);
const fullscreenDiv = ref(null);
const activeKey = ref(null);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const router = useRouter();
const leftShow = ref(false);
const settlePage = ref(null);
const settleSize = 8;
const settlePageOpts = ref([]);
const dailyType = ref(2);
const dailyTypeOpts = [
	{
		value: 1,
		label: "钢筋"
	},
	{
		value: 2,
		label: "混凝土"
	}
];
const indicator = ref('account_type');
const indicatorOpts = [
	{
		value: 'account_type',
		label: "核算分类"
	},
	{
		value: 'expenditure',
		label: "支出方向"
	}
];
const applyColumns = [
	{
		title: "物料名称",
		dataIndex: "material_name",
		sorter: false,
		ellipsis: true
	},
	{
		title: "规格",
		dataIndex: "model",
		sorter: false,
		ellipsis: true
	},
	{
		title: "日期",
		dataIndex: "date",
		sorter: false,
		ellipsis: true
	},
	{
		title: "项目名称",
		dataIndex: "project",
		sorter: false,
		ellipsis: true
	},
	{
		title: "数量",
		dataIndex: "quantity",
		sorter: false,
		ellipsis: true
	}
];
const applyList = ref([]);
const contractStatistics = ref([]);
const dailyQuantityStatistics = ref({
	apply: [],
	uselog: [],
	yanshou: []
});
const supplierSettleStatistics = ref([]);
const indicatorStatistics = ref([]);
onMounted(async () => {
	projectList.value = (await post("department/projects?type=3", { page_size: 1000 })).data;
	companyList.value = (await post("department/projects?type=2", {
		parent_ids: JSON.stringify([78, 24]),
	})).data;
	companyTreeList.value = formatCompanyTree(companyList.value, projectList.value);
	await refreshDates();
});
function changeTimeType(timeType) {
	const quarter = dayjs().set('month', parseInt(dayjs().month() / 3 + '') * 3).startOf('month').format('YYYY-MM-DD');
	switch (timeType) {
	case 1:
		search.value.date_range = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')];
		break;
	case 2:
		search.value.date_range = [dayjs().startOf('month').subtract(1, 'month').format('YYYY-MM-DD'), dayjs().endOf('month').subtract(1, 'month').format('YYYY-MM-DD')];
		break;
	case 3:
		search.value.date_range = [quarter, dayjs(quarter).add(2, 'month').endOf('month').format('YYYY-MM-DD')];
		break;
	case 4:
		search.value.date_range = [dayjs(quarter).subtract(3, 'month').format('YYYY-MM-DD'), dayjs(quarter).subtract(1, 'day').format('YYYY-MM-DD')];
		break;
	case 5:
		search.value.date_range = [dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().endOf('year').format('YYYY-MM-DD')];
		break;
	case 6:
		search.value.date_range = [dayjs().subtract(1, 'year').startOf('year').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').endOf('year').format('YYYY-MM-DD')];
		break;
	case 7:
		break;
	}
}
watch(() => search.value.date_range, async (newVal) => {
	refreshDates();
})
watch(activeKey, async value => {
	if (!value) return;
	chooseCompany.value = companyTreeList.value.find(item => item.companyId === parseInt(String(value)));
	chooseProject.value = null;
	refreshDates();
})
watch(chooseProject, async value => {
	await refreshDates();
});
const refreshDates = async () => {
	let projectIds = [];
	if (chooseProject.value) {
		projectIds = [chooseProject.value.projectId];
	} else if (chooseCompany.value) {
		projectIds = chooseCompany.value.projects.map(item => item.projectId);
	} else {
		projectIds = projectList.value.map(item => item.id);
	}
	const projectIdsStr = projectIds.join(',');
	const start_date = search.value.date_range[0];
	const end_date = search.value.date_range[1];
	const searchData = {};
	if (start_date && end_date) {
		searchData.start_date = start_date;
		searchData.end_date = end_date;
	}
	await Promise.all([
		selectContractStatistics({ project_ids: projectIdsStr }),
		selectDailyQuantityStatistics({ project_ids: projectIdsStr, ys_type: dailyType.value, ...searchData }),
		selectApplyList({ page: 1, size: 1000, project_ids: projectIdsStr, ...searchData }),
		supplierSettleAmountStatistics({ project_ids: projectIdsStr, ...searchData }),
		selectIndicatorStatistics({ project_ids: projectIdsStr, type: indicator.value, ...searchData })
	]);
	updateLineChart();
	updatePieChart();
	updateBarChart();
	updateColumnChart();
}
const formatCompanyTree = (companyList, projectList) => {
	const companyCfg = {};
	for (const company of companyList) {
		companyCfg[company.id] = {
			companyId: company.id,
			companyName: company.name,
			projects: [],
		}
	}
	const companyIds = Object.keys(companyCfg);
	for (const project of projectList) {
		const parentIds = project.parent_ids.split(',');
		const companyId = companyIds.filter((item) => parentIds.includes(item))[0];
		if (!companyId) continue;
		companyCfg[companyId].projects.push({
			projectName: project.name,
			projectId: project.id,
		});
	}
	return Object.values(companyCfg).filter((item) => item.projects.length)
}
const toChooseAllCompany = () => {
	if (!chooseProject.value && !chooseCompany.value) return;
	chooseCompany.value = null;
	chooseProject.value = null;
	activeKey.value = null;
	refreshDates();
}
const toChooseProject = record => {
	chooseProject.value = record;
};
// 合同统计
const selectContractStatistics = search => {
	return new Promise((resolve, reject) => {
		post("dataBoard/contractStatistics", search).then(data => {
			contractStatistics.value = data;
			resolve(true);
		});
	});
};

// 供应商结算金额统计
const supplierSettleAmountStatistics = search => {
	return new Promise((resolve, reject) => {
		let url = 'dataBoard/supplierSettleAmount';
		if (!chooseProject.value) {
			url = 'dataBoard/projectSettleAmount';
		}
		post(url, search).then(data => {
			supplierSettleStatistics.value = data;
			if (!chooseCompany.value && !chooseProject.value) {
				const companyMap = companyList.value.reduce((target, item) => {
					target[item.id] = item.name;
					return target;
				}, {})
				const project2Company = companyTreeList.value.reduce((target, item) => {
					for (const project of item.projects) {
						target[project.projectId] = item.companyId;
					}
					return target;
				}, [])
				const dataMap = {}
				for (const d of data) {
					const companyId = project2Company[d.id];
					if (!dataMap[companyId]) {
						dataMap[companyId] = {
							id: companyId,
							name: companyMap[companyId],

							amount: 0,
							settle_amount: 0
						};
					}
					dataMap[companyId].amount = add([dataMap[companyId].amount, d.amount], 2)
					dataMap[companyId].settle_amount = add([dataMap[companyId].settle_amount, d.settle_amount], 2)
				}
				supplierSettleStatistics.value = Object.values(dataMap);
			}
			const pages = Math.ceil(supplierSettleStatistics.value.length / settleSize);
			settlePage.value = 1;
			settlePageOpts.value = new Array(pages).fill(1).map((item, index) => {
				return {
					value: index + 1,
					label: `第${index + 1}页`
				}
			});
			resolve(true);
		});
	});
};
// 指标对比查询
const selectIndicatorStatistics = search => {
	return new Promise((resolve, reject) => {
		post("dataBoard/indicatorStatistics", search).then(data => {
			indicatorStatistics.value = data;
			resolve(true);
		});
	});
};

const selectDailyQuantityStatistics = (search) => {
	return new Promise((resolve, reject) => {
		post("dataBoard/dailyQuantityStatistics", search).then(data => {
			dailyQuantityStatistics.value = data;
			resolve(true);
		});
	});
};
// 物资申请计划
const selectApplyList = search => {
	return new Promise((resolve, reject) => {
		post("dataBoard/currentMonthApply", search).then(data => {
			applyList.value = data.map(item => {
				return {
					...item,
					quantity: parseInt(item.quantity) === parseFloat(item.quantity) ? parseInt(item.quantity) : item.quantity,
				}
			});
			resolve(true);
		});
	});
};
const updatePieChart = () => {
	const data = contractStatistics.value;
	const G = G2.getEngine('canvas');
	function renderStatistic(containerWidth, text, style) {
		const textWidth = measureTextWidth(text, style);
		const textHeight = style.lineHeight || style.fontSize
		const R = containerWidth / 2;
		// r^2 = (w / 2)^2 + (h - offsetY)^2
		let scale = 1;
		if (containerWidth < textWidth) {
			scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
		}
		const textStyleStr = `width:${containerWidth}px;`;
		return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};color: white;">${text}</div>`;
	}
	const defaultOpt = {
		appendPadding: 10,
		angleField: "amount",
		colorField: "type",
		radius: 0.85,
		innerRadius: 0.6,
		// label: {
		// 	type: "inner",
		// 	offset: '-30%',
		// 	content: ({ count }) => {
		// 		return count
		// 	}
		// },
		label: {
			type: "spider",
			style: {
				fontSize: '12px',
			},
			// formatter(data, mappingData) {
			// 	const group = new G.Group({});
			// 	group.addShape({
			// 		type: 'circle',
			// 		attrs: {
			// 			x: 0,
			// 			y: 0,
			// 			width: 40,
			// 			height: 50,
			// 			r: 5,
			// 			fill: mappingData.color
			// 		},
			// 	});
			// 	group.addShape({
			// 		type: 'text',
			// 		attrs: {
			// 			x: 10,
			// 			y: 8,
			// 			text: `${data.type}`,
			// 			fill: mappingData.color,
			// 		},
			// 	});
			// 	group.addShape({
			// 		type: 'text',
			// 		attrs: {
			// 			x: 10,
			// 			y: 25,
			// 			fontSize: '12px',
			// 			text: `${data.count}个`,
			// 			fill: 'rgba(0, 0, 0, 0.65)',
			// 			fontWeight: 700,
			// 		},
			// 	});
			// 	return group;
			// },
			formatter(data, mappingData) {
				const group = new G.Group({});
				group.addShape({
					type: 'text',
					attrs: {
						x: 10,
						y: 8,
						text: `${(data.amount / 10000).toFixed(2)}万元`,
						fill: mappingData.color,
					},
				});
				return group;
			},
			// content: (data, data2) => {
			//   console.log(data, data2)
			//   return `${data.count}`
			// }
		},
		statistic: {
			title: {
				offsetY: -4,
				style: {
					fontSize: '36px',
				},
				customHtml: (container, view, datum) => {
					const { width, height } = container.getBoundingClientRect();
					const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
					const text = datum ? datum.type : '合同总额';
					return renderStatistic(d, text, { fontSize: 28 });
				},
			},
			content: {
				offsetY: 4,
				style: {
					fontSize: '12px',
				},
				customHtml: (container, view, datum, data) => {
					const { width } = container.getBoundingClientRect();

					let text = add(data.map((item) => item.amount));
					if (text) {
						text = `${(text / 10000).toFixed(2)}万元`
					}
					return renderStatistic(width, text, { fontSize: 2 });
				},
			},
		},
		tooltip: {
			customContent(value, items) {
				const item = items.filter(i => i.data.type === value)[0];
				return `
            <div style="padding: 5px 0;text-align:left;">
                <div style="background-color: ${item?.color};border-radius: 50%;width: 8px;height:8px;display:inline-block;"></div> ${item?.data.type}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同数</b>: ${item?.data.count}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同总金额</b>: ${item?.data.amount}</div>
          `;
			}
		},
		legend: {
			title: {
				text: `合同总数:${data.reduce((target, item) => target + item.count, 0)}份`,
				spacing: 10,
				style: { fill: 'white' }
			},
			itemValue: {
				formatter(text, item) {
					const items = data.filter((d) => d.type === item.value);
					return (items[0] || {}).count + ' 份';
				},
				style: {
					fill: 'white'
				}
			},
			itemName: {
				style: {
					fill: 'white'
				}
			},
		},
		interactions: [{ type: "element-active" }]
	};
	if (!pieChart.value) {
		pieChart.value = new Pie("contractStatistics", {
			...defaultOpt,
			data
		});
		pieChart.value.render();
		pieChart.value.on('legend-item:click', (event) => {
			const target = event.gEvent?.shape?.attrs?.text;
			const data2Type = data.reduce((target, item) => {
				target[item.type] = item;
				return target;
			}, {})
			const typeObj = data2Type[target];
			if (!typeObj) return;
			const query = {
				type: typeObj.type_id,
			};
			if (chooseProject.value) {
				query.project_id = chooseProject.value.projectId;
			}
			if (chooseCompany.value) {
				query.company_id = chooseCompany.value.companyId;
			}

			if (typeObj.material_type) query.material_type = typeObj.material_type;
			switch (query.type) {
			case 1:
				router.push({
					path: `/contract`,
					query
				})
				break;
			case 2:
				router.push({
					path: `/contractzz`,
					query
				})
				break;
			case 3:
				router.push({
					path: `/contractjx`,
					query
				})
				break;
			}
			// 在这里处理你的点击事件逻辑
		});
	} else {
		pieChart.value.update({
			...defaultOpt,
			data
		});
	}
};

const updateLineChart = () => {
	const data = [];
	for (const key in dailyQuantityStatistics.value) {
		let type;
		switch (key) {
		case 'apply':
			type = '计划数量';
			break;
		case 'uselog':
			type = '出库数量';
			break;
		case 'yanshou':
			type = '验收数量';
			break;
		}
		for (const item of dailyQuantityStatistics.value[key]) {
			data.push({
				category: type,
				date: item.date,
				value: item.quantity,
			});
		}
	}
	const defaultOpt = {
		data,
		xField: 'date',
		yField: 'value',
		seriesField: 'category',
		legend: {
			position: 'top',
			itemName: {
				style: {
					fill: 'white'
				}
			},
		},
		xAxis: {
			label: {
				style: {
					fill: 'white',
				}
			}
		}
	}
	if (!lineChart.value) {
		lineChart.value = new Line('dailyStatistics', {
			...defaultOpt,
			data,
		})
		lineChart.value.render();
	} else {
		lineChart.value.update({
			...defaultOpt,
			data,
		});
	}
};

const updateBarChart = () => {
	const data = [];
	for (let i = (settlePage.value - 1) * settleSize; i < supplierSettleStatistics.value.length && i < settlePage.value * settleSize; i++) {
		const statistic = supplierSettleStatistics.value[i];
		data.push({
			name: statistic.name,
			type: '应结算额(万元)',
			amount: parseFloat((statistic.amount / 10000).toFixed(2)),
		});
		data.push({
			name: statistic.name,
			type: '已结算额(万元)',
			amount: parseFloat((statistic.settle_amount / 10000).toFixed(2)),
		});
	}
	const defaultCfg = {
		isGroup: true,
		xField: 'amount',
		yField: 'name',
		seriesField: 'type',
		// dodgePadding: 4,
		minBarWidth: 10,
		maxBarWidth: 40,
		legend: {
			position: 'top', // 将颜色标签放在图表的右侧
			itemName: {
				style: {
					fill: 'white'
				}
			},
		},
		label: {
			// 可手动配置 label 数据标签位置
			position: 'middle', // 'left', 'middle', 'right'
			formatter(data) {
				if (parseFloat(data.amount) === 0) return data.amount;
				return data.amount + '万元';
			},
			// 可配置附加的布局方法
			layout: [
				// 柱形图数据标签位置自动调整
				{ type: 'interval-adjust-position' },
				// 数据标签防遮挡
				{ type: 'interval-hide-overlap' },
				// 数据标签文颜色自动调整
				{ type: 'adjust-color' },
			],
		},
		xAxis: {
			// title: {
			//   text: '万元',
			//   position: 'end',
			// },
			label: {
				style: {
					fill: 'white',
				},
				formatter(item) {
					if (parseFloat(item) === 0) return item;
					return item + '万元';
				}
			},
		},
		yAxis: {
			label: {
				style: {
					fill: 'white',
				},
				formatter(text) {
					let result = '';
					while (text) {
						result += `${text.slice(0, 8)}\n`;
						text = text.slice(8)
					}
					return result
				},
			}
		}
	}
	if (!barChart.value) {
		barChart.value = new Bar("supplierSettleAmountStatistics", {
			...defaultCfg,
			data,
		});
		barChart.value.render();
	} else {
		barChart.value.update({
			...defaultCfg,
			data,
		});
	}
}
const updateColumnChart = () => {
	const data = indicatorStatistics.value
	const defaultCfg = {
		xField: 'name',
		yField: 'data',
		xAxis: {
			label: {
				autoRotate: false,
			},
		},
		slider: {
			start: 0,
			end: 1,
		},
		meta: {
			data: {
				alias: '数量',
			},
		},
	}
	if (!columnChart.value) {
		columnChart.value = new Column("indicatorStatistics", {
			...defaultCfg,
			data,
		});
		columnChart.value.render();
	} else {
		columnChart.value.update({
			...defaultCfg,
			data,
		});
	}
}

const innerCompanyList = computed(() => {
	const list = JSON.parse(JSON.stringify(companyTreeList.value));
	if (searchProject.value) {
		return list.filter(item => {
			item.projects = item.projects.filter(project => project.projectName.indexOf(searchProject.value) > -1);
			return item.projects.length > 0
		});
	} else {
		return list;
	}
});
const fullScreen = () => {
	if (fullscreenDiv.value.requestFullscreen) {
		fullscreenDiv.value.requestFullscreen();
	} else if (fullscreenDiv.value.mozRequestFullScreen) {
		fullscreenDiv.value.mozRequestFullScreen();
	} else if (fullscreenDiv.value.webkitRequestFullscreen) {
		fullscreenDiv.value.webkitRequestFullscreen();
	} else if (fullscreenDiv.value.msRequestFullscreen) {
		fullscreenDiv.value.msRequestFullscreen();
	}
}
const changeDailyType = async () => {
	let projectIds = [];
	if (chooseProject.value) {
		projectIds = [chooseProject.value.projectId];
	} else if (chooseCompany.value) {
		projectIds = chooseCompany.value.projects.map(item => item.projectId);
	} else {
		projectIds = projectList.value.map(item => item.id);
	}
	const projectIdsStr = projectIds.join(',');
	await selectDailyQuantityStatistics({ project_ids: projectIdsStr, ys_type: dailyType.value });
	updateLineChart();
};

const changeSettlePage = () => {
	updateBarChart()
}
const changeIndicator = async () => {
	let projectIds = [];
	if (chooseProject.value) {
		projectIds = [chooseProject.value.projectId];
	} else if (chooseCompany.value) {
		projectIds = chooseCompany.value.projects.map(item => item.projectId);
	} else {
		projectIds = projectList.value.map(item => item.id);
	}
	const projectIdsStr = projectIds.join(',');
	await selectIndicatorStatistics({ project_ids: projectIdsStr, type: indicator.value });
	updateColumnChart();
};
</script>
<style>
@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}
.board .ant-collapse-content-box {
  padding: 0;
}
.choose-company .ant-collapse-header {
  color: #1b9bee!important;
}
</style>
<style scoped lang="scss">
$theme-color: #112c4a;
$theme-font-color: white;
$theme-border-color: #1d70d2;
:deep(.theme-btn) {
  color: $theme-font-color;
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(34, 160, 243, 0.6);
}
:deep(.theme-btn):hover {
  color: $theme-font-color;
  background-color: rgba(0, 154, 255, 0.6);
  border: 1px solid rgba(34, 160, 243, 0);
}
.theme-input{
  color: $theme-font-color;
  background-color: $theme-color;
  border: 1px solid $theme-border-color;
  :deep(.ant-input) {
    color: $theme-font-color;
    background-color: $theme-color;
    border: $theme-border-color;
  }
  :deep(.ant-picker-input input),:deep(.anticon-swap-right), :deep(.ant-picker-suffix) {
    color: $theme-font-color!important;
  }
}
.theme-radio{
  color: $theme-font-color;
  background-color: $theme-color;
  border: 1px solid $theme-border-color;
  :deep(.ant-radio-button-wrapper) {
    color: $theme-font-color;
    background-color: $theme-color;
    border: $theme-border-color;
  }
  :deep(.ant-radio-button-checked) {
    background-color: #0e7eff;
  }
}
.theme-select {
  color: $theme-font-color;
  background-color: $theme-color;
  border: 1px solid $theme-border-color;
  :deep(.ant-select-selector) {
    color: $theme-font-color;
    background-color: $theme-color;
    border: $theme-border-color;
  }
  :deep(.ant-select-arrow) {
    color: $theme-font-color;
  }
}
.board {
  text-align: center;
  color: $theme-font-color;
  background-color: $theme-color;
  > .title {
    .left-opt {
      position: absolute;
      left: 10px;
    }
    .full-screen {
      position: absolute;
      right: 10px;
      .time-filter {
        margin-right: 10px;
      }
    }
    position:relative;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    border-top: 1px solid $theme-border-color;
    border-bottom: 1px solid $theme-border-color;
    background-color: $theme-color;
  }
}

.left-list {
  height: calc(100vh - 124px);
  max-width: 200px;
  min-width: 200px;
  overflow-y: auto;
  .left-list-search {
    position: sticky;
    padding: 8px 10px;
    top: 0;
    background-color: $theme-color;
    z-index: 2;
  }
  :deep(.ant-collapse-header) {
    background-color: $theme-color;
    color: #4fa5ff;
  }
  :deep(.choose .ant-collapse-header) {
    color: $theme-font-color!important;
    background-color: #0e7eff;
  }
  .cursor-pointer {
    background-color: $theme-color;
    color: #4fa5ff;
  }
  .cursor-pointer:hover {
    color: #fdfdfd;
    background-color: #0e7eff;
  }
  .choose {
    color: #fdfdfd;
    background-color: #0e7eff;
  }
}
.border-main {
  height: calc(100vh - 124px);
  flex: 1;
  .title {
    color: $theme-font-color;
    background-color: $theme-color;
    padding: 5px 0;
    font-weight: bold;
  }
  .statistics {
    width: 70%;
    padding-right: 1px;
    flex-direction: column;
    .t-statistics {
      height: 65%;
      .tl-statistics {
        padding-right: 1px;
        width: 50%;
        overflow: hidden;
        flex-direction: column;
        .title {
          border-bottom: 1px solid $theme-border-color;
        }
        .tl-t-statistics {
          height: 50%;
          overflow: hidden;
          border: 1px solid $theme-border-color;
          border-top: none;
        }
        .tl-b-statistics {
          height: 50%;
          border: 1px solid $theme-border-color;
          border-top: none;
          .title {
            border-bottom: 1px solid $theme-border-color;
            font-weight: bold;
          }
          #dailyStatistics {
            padding: 5px;
          }
        }
      }
      .tr-statistics {
        .title {
          border-bottom: 1px solid $theme-border-color;
          font-weight: bold;
        }
        border-bottom: 1px solid $theme-border-color;
      }
    }
    .b-statistics {
      overflow: hidden;
      .bl-statistics {
        width: 50%;
        padding-right: 1px;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
        border: 1px solid $theme-border-color;
        .bl-statistics-title{
          position: sticky;
          top: 0;
          background-color: $theme-color;
          z-index: 1;
          font-weight: bold;
          .table-title {
            background-color: $theme-color;
            padding: 8px 0;
            border: 1px solid $theme-border-color;
            //font-weight: bold;
          }
        }

        .table-body {
          //animation: scroll 20s linear infinite;
          color: #98c5ff;
          .li {
            padding: 8px 0;
            border-bottom: 1px solid $theme-border-color;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .br-statistics {
        .title {
          border-bottom: 1px solid $theme-border-color;
          font-weight: bold;
        }
        max-width: 50%;
        flex: 1;
      }
    }
  }
  .settle {
    width: 30%;
    height: 100%;
    border: 1px solid $theme-border-color;
    .title {
      border-bottom: 1px solid $theme-border-color;
      font-weight: bold;
    }
    .t-settle {
      height: 100%;
      #supplierSettleAmountStatistics {
        padding: 0 5px;
        height: calc(100% - 35px);
      }
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
  background: #012650;
}

/* 修改滚动条滑块的背景颜色 */
::-webkit-scrollbar-thumb {
  background: #4fa5ff;
  border-radius: 1rem;
}

/* 修改滚动条滑块悬停时的背景颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #4fa5ff;
}
</style>
